<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<style>
		.lubo{
			position: relative;
			overflow: hidden;
		}
		.lubo-ul{
			padding: 0;
			position: relative;
			display: inline-flex;
			list-style: none;
		}
		.main{
			width: 50%;
			height: 500px;
			display: inline-flex;
			justify-content: center;
		}
		.lubo-yuandian{
			position: absolute;
			top:80%;
		}
		.lubo-yuandian ul{
			display: inline-flex;
			width: 100%;
			padding: 0;
			z-index: 10000;
			list-style: none;
			justify-content: center;
		}
		.noactive{
			background-color: #fff;
		}
		.active{
			background-color: black;
		}
		.lubo-yuandian ul li{
			width: 10px;
			height: 10px;
			border-radius: 7px;
			
			margin: 0px 5px;
			opacity: 0.6;
		}
		
	</style>
	<body>
		
		
		<div class="main" id="main">
		</div>

		
		<script>
			
			let list=['../../img/下载.png','../../img/background-2.jpg']
			
			var rollImage={
				id:'id',
				list:[],
				moveLeft:0,
				width:0,
				height:0,
				ul_img:null,
				li_list:[],
				totalwidth:0,
				timer:null,
				setId:function(id){
					this.id=id;
				},
				//设置数据
				setlist:function(list){
					this.list=list;
				},
				//设置宽高
				setSize:function(width,height){
					this.height=height;
					this.width=width;
				},
				//创建dom
				createDom:function(){
					let dom=document.getElementById(this.id);
					if(this.width==0){
						this.width=dom.offsetWidth;
					}
					if(this.height==0){
						this.height=dom.offsetHeight;
					}
					let divMain = document.createElement('div');
					divMain.style.width=this.width+'px';
					divMain.style.height=this.height+'px';
					this.ul_img = document.createElement('ul');
					
					divMain.classList.add('lubo');
					let div_img = document.createElement('div');
					
					this.ul_img.classList.add('lubo-ul');
					div_img.appendChild(this.ul_img);
					divMain.appendChild(div_img);
					
					
					let div_yuandian = document.createElement('div');
					div_yuandian.classList.add('lubo-yuandian')
					div_yuandian.style.width=this.width+'px';
					let ul_yuandian = document.createElement('ul');
					div_yuandian.appendChild(ul_yuandian);
					divMain.appendChild(div_yuandian);
					
					this.list.forEach((e,index)=>{
						let imgli = document.createElement('li');
						let img = document.createElement('img');
						img.style.width=this.width+'px';
						img.style.height=this.height+'px';
						img.setAttribute('src',e);
						imgli.appendChild(img);
						this.ul_img.appendChild(imgli);
						
						let yuandian = document.createElement('li');
						
						
						if(index==0){
							yuandian.classList.add('active');
						}else{
							yuandian.classList.add('noactive');
						}
						rollImage.li_list.push(yuandian);
						ul_yuandian.appendChild(yuandian);
					})
					dom.appendChild(divMain);
					
					this.totalwidth=this.width * this.list.length;
					this.totalwidth=(this.totalwidth * -1);
					
					this.li_list.forEach((e,index)=>{
						e.addEventListener('click',function(n){
							let w=(index+1) * this.width;
							this.moveLeft=-1 * w;
							if(this.moveLeft === this.totalwidth){
								this.moveLeft = 0;
							}
							this.ul_img.style.left = this.moveLeft+"px";
							yuandianLiList.forEach((d)=>{
								d.classList.remove('active')
								d.classList.add('noactive')
							})
							e.classList.add("active")
							e.classList.remove('noactive')
						})
					})
				},
				move:function(){
					let num=0;
					rollImage.timer = setInterval(function(){
					    // 当跑完一轮时，重置位置
					    if(rollImage.moveLeft === rollImage.totalwidth){
					        rollImage.moveLeft = 0;
							num=0;
					    }
						console.log(rollImage.totalwidth)
						
						rollImage.li_list.forEach((e)=>{
							e.classList.remove('active');
							e.classList.add('noactive');
						})
						let yuandianDom=rollImage.li_list[num];
						yuandianDom.classList.add("active");
						yuandianDom.classList.remove('noactive');
					    // 设置列表每20毫秒左移5px
					    rollImage.ul_img.style.left = rollImage.moveLeft+"px";
						rollImage.moveLeft -= rollImage.width;
						num++;
					},1000)
				},
				addMouseEvent:function(){
					this.ul_img.onmouseenter = function(){
					    clearInterval(rollImage.timer);
					}; 
					// 鼠标移出，调用move重新开启定时器
					this.ul_img.onmouseleave = function(){
					    rollImage.move();
					}
				},
				start:function(){
					this.createDom();
					this.move();
					this.addMouseEvent();
				}
			}
			
			
			rollImage.setId('main');
		//	rollImage.setSize(400,200);
			rollImage.setlist(list);
			rollImage.start();
			
		</script>
	</body>
</html>